<template>
    <el-dialog v-model="props.isOnTheShelves" :show-close="false" modal-class="customize-dialog" :append-to-body="true" :close-on-click-modal="false" align-center
        width="600">
        <template #header="{ titleId, titleClass }">
            <div class="flex justify-between items-center dialog-header">
                <div class="flex items-center">
                    <h4 :id="titleId" :class="titleClass">产品上架</h4>
                </div>
                <svg-icon size="16px" icon-class="close-line" @click="closeDialog"></svg-icon>
            </div>
        </template>
        <div class="flex items-center">
            <div class="w-full flex items-center remind">
                <svg-icon size="18px" icon-class="error-warning-fill" class="text-yellow-500 mr-5px"></svg-icon>产品信息和关键词已经确认，上架后不可修改，是否确定上架？
            </div>
        </div>
        <div class="text-14px text-#333333 font-bold pt-16px pb-16px">
            关键词预览
        </div>
        <div class="words">
            <ul>
                <li :title="item" v-for="item in state.words" :key="item" :class="{'line-through':item.startsWith('del:')}">{{ format(item) }}</li>
            </ul>
        </div>
        <div class="flex flex-center mt-16px">
            <el-button @click="emit('closeDialog')">取消</el-button>
            <el-button @click="handleConfirm" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { upProductApi,UpProductApi } from '@/api/b2b'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { SuccessFilled,WarningFilled } from '@element-plus/icons-vue'

const props = defineProps<{
    isOnTheShelves: boolean,
    productId?: string
}>()

const emit = defineEmits(['closeDialog'])

const state = reactive({
    words:<string[]>[]
})

function closeDialog(){
    emit('closeDialog')
}
async function upProduct(){
    try{
        const res = await upProductApi({
            id: props.productId
        })
        if(res.code === 200){
            state.words = res.message.split(';')
        }
    }catch(error:any){
        if (error.response && error.response.status === 405){
            confirmMessageBox(WarningFilled,error.response.data.message)
        }
    }
}

function format(str: string): string {
    return removeDelPrefix(str);
}

function removeDelPrefix(str: string): string {
    return str.startsWith('del:') ? str.slice(4) : str;
}

async function handleConfirm(){
    const res = await UpProductApi({
        id: props.productId
    })
    if(res.code === 200){
        confirmMessageBox(SuccessFilled,res.message,'','',() => {
            closeDialog()
        })
    }
}

watchEffect(() => {
    if (props.isOnTheShelves) {
        upProduct()
    }
})
</script>

<style lang="scss" scoped>
.words {
    width: 100%;
    border: 1px solid var(--menuBorderColor);
    padding: 10px 0;
    border-radius: 4px;

    ul {
        overflow: hidden;

        li {
            width: 25%;
            float: left;
            font-size: 14px;
            line-height: 2;
            padding-left: 14px;
        }
    }
}</style>